<template>
	<div id="app">
		<keep-alive v-if="$route.meta.keep">
				<router-view class="pages" :class="{'has-tabs':!$route.meta.noFoot}"></router-view>
		</keep-alive>
		<router-view v-else class="pages" :class="{'has-tabs':!$route.meta.noFoot}"></router-view>
				
		<tabs-com class="tabs" v-if="!$route.meta.noFoot"></tabs-com>
	</div>
</template>
<script>
	// 导入vuex的简写
	import {mapActions,mapMutations} from 'vuex'
	import TabsCom from '@/components/TabsCom.vue'
	// 导入
	import bus from '@/utils/bus.js'

	export default {
		created(){
			// 进入app就请求购物车的数据
			// this.$store.dispatch("getCart");
			// 进入app就把本地存储的user放入到store中
			var userInfo = JSON.parse(localStorage.getItem("user")||"{}");
			// this.$store.commit("SET_USERINFO",userInfo);
			// this.SET_USERINFO(userInfo);
			this.setUserInfo(userInfo);
			this.getCart();
			
		},
		// App.vue作为数据的提供方
		// 提供了数据a
		provide:{
			a:"听说明天就解封了！",
			// 只要子孙元素都可以接收
		},
		name: "app",
		components: {
			TabsCom
		},
		data() {
			return {
				msg: "来自app "
			}
		},
		// 在mounted里面发送
		mounted() {
			// bus.$emit("msgchange", this.msg)
			setTimeout(() => {
				this.changeIt();
			}, 5000)
			// 不做延迟，NavCom还没有监听，这边就发送数据
			// 导致数据接收不到
			// 在任意组件中都可以发送与监听
		},
		methods: {
			// 把vuex中的actions与mutations
			...mapActions(["getCart"]),
			// ...mapMutations(["SET_USERINFO"]),	
			...mapMutations({
				"setUserInfo":"SET_USERINFO"
			}),
			changeIt() {
				this.msg = "明天放假来自app的通知"
				bus.$emit("msgchange", this.msg)
			}
		}



	}
</script>
<style lang="scss">	
	#app {
		width: 100vw;
		height: 100vh;
		position: relative;

		.pages {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
		}

		.has-tabs {
			bottom: 1rem;
		}

		.tabs {
			position: fixed;
			left: 0;
			height: 1rem;
			bottom: 0;
			right: 0;
		}
	}
</style>
